<link rel="stylesheet/less" type="text/css" href="./bricks/component/content/content.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/misc/cover.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/misc/misc.less"/>

<div class="ub-container">

    <div class="ub-content">
        <div class="head">
            <div class="title" data-scroll-animate="animated fadeInUp">
                <i class="iconfont icon-customer"></i>
                item-a
                {ZH,3,8}
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-6 col-md-3" data-repeat="4">
                    <div class="item-a">
                        <div class="image ub-cover-1-1"
                             data-background-url="placeholder/100x100"></div>
                        <div class="title">
                            {ZH,3,8}
                        </div>
                        <div class="slogan">
                            {ZH,10,20}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-content">
        <div class="head">
            <div class="title" data-scroll-animate="animated fadeInUp">
                <i class="iconfont icon-customer"></i>
                item-a
                {ZH,3,8}
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-6 col-md-3" data-repeat="4">
                    <div class="item-a">
                        <div class="icon">
                            <i class="iconfont icon-home ub-color-a"></i>
                        </div>
                        <div class="title">
                            {ZH,3,8}
                        </div>
                        <div class="slogan">
                            {ZH,10,20}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="block-breaker"></div>

<div class="ub-content">
    <div class="panel-a"
         style="background-image:var(--color-primary-gradient-bg);">
        <div class="box">
            <h1 class="title">
                {ZH,3,5}
            </h1>
            <div class="sub-title">
                {ZH,10,50}
            </div>
        </div>
    </div>
</div>

<div class="block-breaker"></div>

<div class="ub-content">
    <div class="panel-b">
        <div class="bg" data-background-url="placeholder/100x100"></div>
        <div class="mask"></div>
        <div class="box">
            <div class="c">
                <div class="c1">
                    <div class="cover ub-cover-4-3"
                         data-background-url="placeholder/100x100"></div>
                </div>
                <div class="c2">
                    <h1 class="title animated fadeInUp">
                        {ZH,10,20}
                    </h1>
                    <div class="sub-title animated fadeInUp">
                        {ZH,10,50}
                        <a href="#">
                            {ZH,2,4}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
